<template>
  <div class="panel panel_chart" style="height: 100%;width: 100%">
    <el-button type="primary" @click="toggle" icon="el-icon-full-screen"
               style="position: absolute;top: 4px;right: 12px">
      全屏
    </el-button>
    <div class="panel-heading">
      <span>
        图表 - {{ workBook?workBook.name:workBookName }}
      </span>
    </div>
    <fullscreen v-model:fullscreen="fullscreen" :teleport="true" :page-only="false" style="z-index: 9999">
      <div class="panel-body fullscreen-wrapper" :style="{top: fullscreen?'0':'40px'}">
        <work-book-view ref="workBookView" :work-book-id="workBookId" :current-work-book="workBook"
                        @initFinished="getWorkBook">
        </work-book-view>
      </div>
    </fullscreen>
  </div>
</template>

<script>
import {
  ref,
  toRefs,
  reactive, defineComponent, onMounted,
} from 'vue'
import {store} from "@/components/chart/common/store";
import WorkBookView from "@/views/WorkBook/view";

import {component} from 'vue-fullscreen'
import {useRoute} from "vue-router";

export default defineComponent({
  props: {workBook: Object},
  setup(props) {
    const {workBook} = toRefs(props)
    const state = reactive({
      fullscreen: false,
      shared: store,
      workBookId: '',
      workBookName: ''
    })

    const route = useRoute()
    const toggle = () => {
      state.fullscreen = !state.fullscreen
    }
    onMounted(() => {
      if (route.name === 'workBookView') {
        state.workBookId = route.query.id
      }
    })

    const getWorkBook = (a, b, _workBook) => {
      state.workBookName = _workBook.name
    }

    return {
      ...toRefs(state),
      toggle,
      workBook,
      getWorkBook
    }
  },
  components: {
    fullscreen: component, WorkBookView
  },
  methods: {
    refreshChart(workBook, data) {
      this.$refs.workBookView.refreshChart(workBook, data)
    }
  }
})
</script>

<style scoped>
.panel_chart .panel-body {
  position: absolute;
  width: 100%;
  top: 40px;
  bottom: 0px;
}

#panel_chart .msContain.halfContain {
  width: 380px;
  height: 120px;
}

.msContain.msContainSimple .msMain {
  border: none;
}

.msMain {
  height: 50%;
  min-height: 60px;
  border: solid 1px #e5e5e5;
  text-align: left;
}

.msContain.halfContain .msMain {
  height: initial;
}

.msContain {
  border-top: solid 6px #1b2b38;
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 160px;
}

#panel_chart .msContain.msContainSimple {
  width: 380px;
  height: 120px;
}

.fullscreen-wrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
